<!DOCTYPE html>
<html>
<head>
    <title>jQuery WeUI</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

    <meta name="description" content="Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description.
    ">

    <link rel="stylesheet" href="/lib/weui.min.css">
    <link rel="stylesheet" href="/css/jquery-weui.css">
    <link rel="stylesheet" href="/css/dist.css">
    <link rel="stylesheet" href="/css/list.css">

</head>

<body ontouchstart data-token="<%= docs.token %>">


    <header class='demos-header'>
        <h1 class="demos-title">商户列表</h1>
    </header>

    <div class="bd">
        <div class="page__bd">
            <div class="weui-search-bar" id="searchBar">
                <form class="weui-search-bar__form" action="#">
                    <div class="weui-search-bar__box">
                        <i class="weui-icon-search"></i>
                        <input type="search" class="weui-search-bar__input" id="searchInput" placeholder="搜索" required="">
                        <a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
                    </div>
                    <label class="weui-search-bar__label" id="searchText" style="transform-origin: 0px 0px 0px; opacity: 1; transform: scale(1, 1);">
                        <i class="weui-icon-search"></i>
                        <span>搜索</span>
                    </label>
                </form>
                <a href="javascript:" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a>
            </div>
            <div class="weui-cells" id="list">
                <% for(var i = 0; i < docs.item.length; i++){ %>
                    <a href="javascript:actionSheet(<%= docs.item[i].mid %>,'<%= docs.item[i].admin || null %>');" class="weui-media-box weui-media-box_appmsg">
                        <div class="weui-media-box__hd">
                            <img class="weui-media-box__thumb" src="" alt="">
                        </div>
                        <div class="weui-media-box__bd">
                            <h4 class="weui-media-box__title" data-admin="<%= docs.item[i].admin || null %>"><%= docs.item[i].name %></h4>
                            <p class="weui-media-box__desc">地址：<%- docs.item[i].address.area.join("/") +'&nbsp;&nbsp;'+docs.item[i].address.text %></p>
                        </div>
                    </a>
                <% } %>
            </div>
        </div>
    </div>
    <div class="weui-loadmore">
        <% if(docs.item.length < 10){ %>
            <span id="loadingText" class="weui-loadmore__tips">没有更多的商户</span>
            <script type="text/javascript">
            var loading = true;
            </script>
        <% }else{ %>
            <i class="weui-loading"></i>
            <span id="loadingText" class="weui-loadmore__tips">正在加载中...</span>
            <script type="text/javascript">
            var loading = false;
            </script>
        <% } %>
    </div>
    <div class="weui-footer" style="display:none;">
        <p class="weui-footer__links">
            <a href="/http://jqweui.com" class="weui-footer__link">jQuery-WeUI 首页</a>
        </p>
        <p class="weui-footer__text">Copyright © 2016 jqweui.io</p>
    </div>
    <script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
    <script src="/lib/jquery-2.1.4.js"></script>
    <script src="/lib/fastclick.js"></script>
    <script>
    $(function() {
        FastClick.attach(document.body);
    });
    </script>
    <script src="/js/jquery-weui.js"></script>

    <script type="text/javascript">
    var jssdk = <%- JSON.stringify(docs.jssdk) %>;
    jssdk.jsApiList = ["closeWindow","hideMenuItems"];
    wx.config(jssdk);
    wx.ready(function(){
        wx.hideMenuItems({
            menuList: [
                "menuItem:editTag",
                "menuItem:delete",
                "menuItem:copyUrl",
                "menuItem:originPage",
                "menuItem:readMode",
                "menuItem:openWithQQBrowser",
                "menuItem:openWithSafari",
                "menuItem:share:email",
                "menuItem:share:brand",
                "menuItem:share:appMessage",
                "menuItem:share:timeline",
                "menuItem:share:qq",
                "menuItem:share:weiboApp",
                "menuItem:favorite",
                "menuItem:share:facebook",
                "menuItem:share:QZone"
            ] // 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
        });
    });
    var token = $("body").data("token");
    var page = 1;
    var count = 10;
    var template = '<a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">'+
        '<div class="weui-media-box__hd">'+
            '<img class="weui-media-box__thumb" src="" alt="">'+
        '</div>'+
        '<div class="weui-media-box__bd">'+
            '<h4 class="weui-media-box__title">标题一</h4>'+
            '<p class="weui-media-box__desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨aa 道。</p>'+
        '</div>'+
    '</a>';
    $(document.body).infinite().on("infinite", function() {
        if(loading) return;
        loading = true;
        page += 1;
        var data = {
            token : token,
            count : count,
            page : page
        };
        $.ajax({
            type: "post",
            dataType: "json",
            data : data,
            success: function(data){
                for(var i = 0; i < data.docs.item.length; i++ ){
                    var it = $(template);
                    it.attr('mid', data.docs.item[i].mid);
                    it.find(".weui-media-box__thumb").attr('src', data.docs.item[i].image || "");
                    it.find("h4").html(data.docs.item[i].name);
                    it.find(".weui-media-box__desc").html("地址："+data.docs.item[i].address.area.join("/")+"&nbsp;&nbsp;"+data.docs.item[i].address.text);
                    $(it).click(function(){
                        actionSheet($(this).attr("mid"), $(this).find('h4').data('admin'));
                    })
                    it.appendTo('#list');
                };
                if(data.docs.item.length < count){
                    $(".weui-loading").remove();
                    $("#loadingText").html("没有更多的商户");
                }else
                    loading = false;
            }
        });
    });

    var actionSheet = function(id,admin){
        var actions = [];
        if(!admin)
            actions.push({
              text: "添加管理员",
              onClick: function() {
                qrcode(id,2);
              }
            });
        actions.push({
          text: "商品价格列表",
          onClick: function() {
            window.location.href = "price?token="+token+"&mid="+id;
          }
        });
        actions.push({
          text: "邀请监督员",
          onClick: function() {
            // qrcode(id,0);
            $.modal({
              title: "添加公众号",
              text: qrcodeHTML,
              buttons: [
                { text: "下一步", onClick: function(){
                    setTimeout(function(){qrcode(id,0);},300);
                } },
                { text: "取消", className: "default", onClick: function(){ console.log(3)} },
              ]
            });
            $("#qrcode").html('<p>'+
                '<img src="<%= docs.qrcode %>" style="width: 100%;" />'+
            '</p>');
          }
        });
        actions.push({
          text: "付款二维码",
          onClick: function() {
              qrcode(id,1);
          }
        });
        $.actions({
          title: name+"&nbsp;操作",
          actions: actions
        });
    };
    var qrcodeHTML = '<div style="width:80%;padding-bottom: 80%;position:relative;margin:0 auto;">'+
        '<div style="position: absolute;left: 0;top:0;width: 100%;height:100%;">'+
            '<div style="width : 100%;height:100%;display:table;">'+
                '<div id="qrcode" style="display:table-cell;vertical-align: middle;text-align: center;"></div>'+
            '</div>'+
        '</div>'+
    '</div>';
    var qrcode = function(id, type){
        var buttons = [];
        var url = "";
        var getType;
        var data;
        var title;
        if(type === 0){
            buttons.push({ text: "刷新",close: false, onClick: function(e){
                loadingQRcode(id, getType, url, data);
            }});
            url = "/admin/addSupervisor";
            getType = "post";
            data = {
                token: token,
                mid : id
            };
            title = "邀请监督员";
        }else if(type === 1){
            url = "/open/qrcode";
            getType = "get";
            data = {
                url : encodeURIComponent(location.origin +"/pay?mid="+ id),
                size: 20
            };
            title = "付款二维码";
        }else{
            buttons.push({ text: "刷新",close: false, onClick: function(e){
                loadingQRcode(id, getType, url, data);
            }});
            url = "/admin/addMerchantAdmin";
            getType = "post";
            data = {
                token: token,
                mid : id
            };
            title = "添加管理员";
        };

        buttons.push({ text: "关闭", className: "default"});
        $.modal({
          title: title,
          text: qrcodeHTML,
          buttons: buttons
        });
        loadingQRcode(id, getType, url, data);
    };

    var loadingQRcode = function(id, type, url, data){
        console.log(444444444);
        $("#qrcode").html('<p>'+
            '<i class="weui-loading"></i>'+
            '<span class="weui-loadmore__tips">正在加载</span>'+
        '</p>');
        $.ajax({
            type: type,
            dataType: "json",
            url : url,
            data : data,
            success: function(data){
                setTimeout(function(){
                    if(!data.code)
                    $("#qrcode").html('<p>'+
                        '<img src="'+ data.docs.qrcode +'" style="width: 100%;" />'+
                    '</p>');
                },50);
            }
        });
    };

    </script>
</body>
</html>
